<script setup lang="ts">
import { ref, watch } from 'vue';
import { useBooleanStore } from '@/store';
import TopInput from './components/top-input.vue';
import TopTable from './components/top-table.vue';
// import EditLocation from './components/edit-location.vue';

const emit = defineEmits(['updateTableData']);
const booleanStore = useBooleanStore();
const loading = ref<boolean>(false);
const topTable = ref<InstanceType<typeof TopTable> | null>(null);
const localTableData = ref<any[]>([]);
function bottomTableSearch() {
  if (topTable.value) {
    topTable.value.handleSearch();
  }
}
watch(
  () => booleanStore.boolValue,
  (value) => {
    loading.value = value;
  }
);
watch(
  localTableData,
  () => {
    emit('updateTableData', localTableData.value);
  },
  { deep: true }
);
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">成品接收</div>
      </template>
      <div class="content">
        <a-spin dot :loading="loading" tip="接收中...">
          <TopInput
            @update-array="bottomTableSearch"
            :localTableData="localTableData"
          />
          <TopTable ref="topTable" @localTableData="localTableData = $event" />
        </a-spin>
      </div>
      <!-- <EditLocation /> -->
    </a-card>
  </div>
</template>

<style scoped>
.flow-query {
  margin: 0px;
  padding: 10px;
  height: 100%;
}
.card-title {
  font-size: 24px;
}
.content {
  display: flex;
  flex-direction: column;
}
</style>
